/* COLORS */

:root {	
	--font: #000000;
	--bg: #FFFFFF;
	--main: #B6262C;
	--ahref: #B6262C;
	--border: #B6262C;
	--shadow: #6D6E71;
	--error: #CD0000;
	--error-font: #FFF;
	--white: #FFF;
	--font-reverse: #FEFEFE;
	--hl-light: #CCC;
	--hl-dark: #555;
	--console-h: #B59393;
	--console-font: #C2BE9E;
	--console-bg: #3F3F3F;
}

/* COLORS END */



/* PORTRAIT */

@media all and (orientation:portrait) {

	header.primary {
			
			display: -webkit-flex; display: flex;
			-webkit-flex-direction: column; flex-direction: column;
			-webkit-flex-wrap: wrap; flex-wrap: wrap;
			-webkit-justify-content: flex-start; justify-content: flex-start;
			-webkit-align-content: stretch; align-content: stretch;
			-webkit-align-items: center; align-items: center;
			padding-top: 4vh;
		}
		
		header.primary section {
			 -webkit-order: 0; order: 0;
			-webkit-flex: 0 1 auto; flex: 0 1 auto;
			-webkit-align-self: auto; align-self: auto;
			width: 50vw;
			
		}
		
		header.primary section h1 {
			display: block;
			background: url(../gfx/header/logo/bookart_header_logo_white.svg) 50% 0 no-repeat;
			background-size: contain;
			height: 50vw;
			width: 50vw;
		}
		
		header.primary section h1 strong {
			display: none;
		}
		
		header.primary section dl {
			padding: 4vh 3vh 1vh 3vh;
		}
		
		header.primary section dl dt {
			font-weight: 600;
			margin: 1vh 0 3vh 0;
		}
		
		header.primary section dl dt a {
			color: var(--font);
		}
		
		header.primary section dl dd {
			margin: 2vh 0 2vh 0;
		}
}





/* LANDSCAPE */

@media all and (orientation:landscape) {
	
	
	
	
	@media all and (max-width: 99999px) and (min-width: 1025px) {

			
		header.primary {
			height: 100vh;
			
			display: -webkit-flex; display: flex;
			-webkit-flex-direction: column; flex-direction: column;
			-webkit-flex-wrap: wrap; flex-wrap: wrap;
			-webkit-justify-content: center; justify-content: center;
			-webkit-align-content: stretch; align-content: stretch;
			-webkit-align-items: center; align-items: center;
		}
		
		header.primary section {
			 -webkit-order: 0; order: 0;
			-webkit-flex: 0 1 auto; flex: 0 1 auto;
			-webkit-align-self: auto; align-self: auto;
			width: 50vh;
			
		}
		
		header.primary section h1 {
			display: block;
			background: url(../gfx/header/logo/bookart_header_logo_white.svg) 50% 0 no-repeat;
			background-size: contain;
			height: 50vh;
			width: 50vh;
		}
		
		header.primary section h1 strong {
			display: none;
		}
		
		header.primary section dl {
			display: -webkit-flex; display: flex;
			-webkit-flex-direction: row; flex-direction: row;
			-webkit-flex-wrap: wrap; flex-wrap: wrap;
			-webkit-justify-content: flex-start; justify-content: flex-start;
			-webkit-align-content: stretch; align-content: stretch;
			-webkit-align-items: center; align-items: center;
		}
		
		header.primary section dl dt {
			font-weight: 600;
			-webkit-order: 0; order: 0;
			-webkit-flex: 4 1 auto; flex: 4 1 auto;
			-webkit-align-self: auto; align-self: auto;
		}
		header.primary section dl dt a {
			color: var(--font);
		}
		header.primary section dl dd {
			font-weight: 300;
			-webkit-order: 0; order: 0;
			-webkit-flex: 1 1 auto; flex: 1 1 auto;
			-webkit-align-self: auto; align-self: auto;
			text-align: right;
		}

	}
	
	
	
	
	/* 2560   , k1.3 */

	@media all and (min-width: 1921px) {
	}
	
	
	
	
	/* 1920   , k1.0 */

	@media all and (max-width: 1920px) and (min-width: 1661px) {		
	}




	/* 1660 k0,86 */

	@media all and (max-width: 1660px) and (min-width: 1441px) {
	}




	/* 1440 k0.73*/

	@media all and (max-width: 1440px) and (min-width: 1367px) {
	}




	/* 1366 k0.71*/

	@media all and (max-width: 1366px) and (min-width: 1281px) {
	}




	/* 1280 k0.67*/

	@media all and (max-width: 1280px) and (min-width: 1025px) {
	}
	
	
	
	/* UNDER */
	
	@media all and (min-width: 1px) and (max-width: 1024px) {
		
		header.primary {
			height: 100vh;
			
			display: -webkit-flex; display: flex;
			-webkit-flex-direction: column; flex-direction: column;
			-webkit-flex-wrap: wrap; flex-wrap: wrap;
			-webkit-justify-content: flex-start; justify-content: flex-start;
			-webkit-align-content: stretch; align-content: stretch;
			-webkit-align-items: center; align-items: center;
			padding-top: 1vh;
		}
		
		header.primary section {
			-webkit-order: 0; order: 0;
			-webkit-flex: 0 1 auto; flex: 0 1 auto;
			-webkit-align-self: auto; align-self: auto;
			width: 70vw;
			
		}
		
		header.primary section h1 {
			display: block;
			background: url(../gfx/header/logo/bookart_header_logo_white.svg) 50% 0 no-repeat;
			background-size: contain;
			height: 60vh;
		}
		
		header.primary section h1 strong {
			display: none;
		}
		
		header.primary section dl {
			display: -webkit-flex; display: flex;
			-webkit-flex-direction: row; flex-direction: row;
			-webkit-flex-wrap: wrap; flex-wrap: wrap;
			-webkit-justify-content: flex-start; justify-content: flex-start;
			-webkit-align-content: stretch; align-content: stretch;
			-webkit-align-items: center; align-items: center;
		}
		
		header.primary section dl dt {
			font-weight: 600;
			-webkit-order: 0; order: 0;
			-webkit-flex: 4 1 auto; flex: 4 1 auto;
			-webkit-align-self: auto; align-self: auto;
		}
		header.primary section dl dt a {
			color: var(--font);
		}
		header.primary section dl dd {
			font-weight: 300;
			-webkit-order: 0; order: 0;
			-webkit-flex: 1 1 auto; flex: 1 1 auto;
			-webkit-align-self: auto; align-self: auto;
			text-align: right;
		}
	}
}